<template>
    <div class="my">
        <div class="wen-top">
            <router-link to="../hisconsultation">
                <img src="../../../assets//images/fanhui.png" alt="" class="fanhui" />
            </router-link>
            <img src="../../../assets/images/user_bg.png" alt="">
        </div>
        <div class="my-center">
            <img :src="mylists.image" alt="">
            <h3>{{ mylists.name }}</h3>
            
        </div>
        <div class='my-a'>
            <div class="zi">
                <div v-for="(item,index) in mylists.mations" :key="id">
                    <h3>{{item.stature}}cm</h3>
                    <h3>{{item.weight}}kg</h3>
                    <h3>{{item.age}}岁</h3>
                </div>
                
            </div>
            <img src="../../../assets/icon/hdpi/my_icon_height_n.png" alt="">
            <img src="../../../assets/icon/hdpi/my_icon_weight_n.png" alt="">
            <img src="../../../assets/icon/hdpi/my_icon_age_n.png" alt="">
        </div>

        <div v-for="(item,index) in mylists.mations" :key="id">


        
        <div class="my-b">
            <h3>[主要病症]</h3>
            <div>{{ item.symptoms }}</div>
        </div>
        <div class="my-c">
            <h3>[现病史]</h3>
            <div>{{ item.present }}</div>
        </div>
        <div class="my-d">
            <h3>[既往病史]</h3>
            <div>{{ item.previous}}</div>
        </div>
        <div class="my-e">
            <h3>最后一次治疗经历</h3>
            <div>{{ item.Sessiond }}</div>
            <div class="div2">{{ item.Sessions}}</div>
            <div class="time">{{ item.Sessiont }}</div>
        </div>
        <div class="my-f">
            <h3>[相关图片]</h3>
            <img src="../../../assets/icon/hdpi/b1.png" alt="">
        </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'; 
import {MyuserData} from '../../../request/api'
import { useRoute,useRouter } from 'vue-router';
const route=useRoute()

 const id =route.params.id;  
 console.log(id);
 
const mylists=ref<Array<any>>([])

watch(route,async()=>
        {
            mylists.value=(await MyuserData(id)).data.data
            // console.log(mylists);
            
        },
        {
            deep:true,
            immediate:true
        })


</script>

<style scoped lang="less">
    .my{
        width: 120%;
        height: 100%;
        margin-left: -30px;
        margin-top: -20px;
        border: solid 1px #fbf9f9;
        position: relative;
        .wen-top{
          width: 100%;
          height: 230px;
          position: absolute;
          top: -10px;
          img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: -2px;
            top: -5px;
          }
          .fanhui{
              width: 25px;
              height: 25px;
              margin: 10px 10px;
              z-index: 999;
          }
        }
        .my-center{
            width: 100%;
            height: 30px;
            margin-top: 216px;
            img{
                width: 60px;
                height: 60px;
                border-radius: 30px;
                position: absolute;
                left: 15px;
                top: 180px;
            }
            h3{
                position: absolute;
                left: 80px;
                top: 215px;
            }
        }
        .my-a{
            width: 340px;
            height: 100px;
            margin-left: 15px;
            margin-top: 20px;
            border-radius: 30px;
            border: solid 1px #000;
            .zi{
                width: 100%;
                height: 50px;
                    h3{
                    float: left;
                    margin-left: 50px;
                    margin-top: 10px;
                }
            }
            img{
                width: 30px;
                height: 30px;
                float: left;
                margin-left: 62px;
            }
        }
        .my-b{
            width: 340px;
            height: 70px;
            margin-left: 15px;
            margin-top: 30px;
            position: relative;
            // border: solid 1px #000;
            h3{
                position: absolute;
                left: 20px;
                color: #407eeb;
            }
            div{
                position: absolute;
                top: 40px;
                left: 20px;
            }
        }
        .my-c{
            width: 340px;
            height: 80px;
            margin-left: 15px;
            margin-top: 30px;
            position: relative;
            h3{
                position: absolute;
                left: 20px;
                color: #407eeb;
            }
            div{
                margin-top: 10px;
                position: absolute;
                top: 30px;
                left: 20px;
                font-size: 13px;
            }
        }
        .my-d{
            width: 340px;
            height: 70px;
            margin-left: 15px;
            margin-top: 40px;
            position: relative;
            h3{
                position: absolute;
                left: 20px;
                color: #407eeb;
            }
            div{
                position: absolute;
                top: 40px;
                left: 20px;
            }
        }
        .my-e{
            width: 340px;
            height: 100px;
            margin-left: 15px;
            margin-top: 30px;
            position: relative;
            h3{
                position: absolute;
                left: 20px;
                color: #407eeb;
            }
            div{
                margin-top: 10px;
                position: absolute;
                top: 30px;
                left: 20px;
                font-size: 13px;
            }
            .div2{
                position: absolute;
                top: 50px;
            }
            .time{
                position: absolute;
                left: 250px;
                font-size: 11px;
            }
        }
        .my-f{
            width: 340px;
            height: 260px;
            margin-left: 15px;
            margin-top: 40px;
            position: relative;
            h3{
                position: absolute;
                left: 20px;
                color: #407eeb;
            }
            img{
                width: 340px;
                height: 200px;
                position: absolute;
                top: 40px;
            }
        }
    }
</style>